<template>
  <div id="page-admin-index">
    <div class="left-nav">
      <el-button
        style="width: 100%;"
        size="small"
        @click="isCollapse = !isCollapse"
        :type="isCollapse === true ? 'primary' : ''"
      >
        {{ isCollapse === true ? '展开' : '收起' }}
      </el-button>
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :unique-opened="true"
        ref="elMenuRef"
        router
        :style="`height:${windowHeight - 50}px;`"
      >
        <template v-for="(menuItem, index) in menuList">
          <el-submenu v-if="menuItem.children" :key="index" :index="index">
            <template slot="title">
              <i :class="menuItem.icon"></i>
              <span>{{ menuItem.label }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="(kid, k) in menuItem.children"
                :key="k"
                :index="index + '-' + k"
                :route="'/home/admin-index' + kid.router"
              >
                {{ kid.label }}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-- :key="index" -->
          <el-menu-item
            v-else
            :index="index"
            :route="'/home/admin-index' + menuItem.router"
          >
            <i :class="menuItem.icon"></i>
            <span slot="title">
              {{ menuItem.label }}
            </span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>

    <div class="admin-body">
      <TagsNav style="margin-bottom: 5px;"></TagsNav>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import TagsNav from '@/components/TagsNav/index.vue'
export default {
  components: { TagsNav },
  watch: {
    windowHeight(val) {
      let that = this
    },
  },
  data() {
    return {
      windowHeight: document.documentElement.clientHeight, //实时屏幕高度
      isCollapse: false,
      menuList: {
        user: {
          icon: 'el-icon-user',
          label: '人员管理',
          router: '/userManagement',
        },
        notice: {
          icon: 'el-icon-bell',
          label: '通知管理',
          router: '/notice',
        },
        report_management: {
          icon: 'el-icon-upload2',
          label: '上报管理',
          children: {
            health: {
              label: '健康上报',
              router: '/health',
            },
            travel: {
              label: '行程上报',
              router: '/travel',
            },
          },
        },
        material: {
          icon: 'el-icon-takeaway-box',
          label: '物资管理',
          router: '/material',
        },
        voluntary: {
          icon: 'el-icon-date',
          label: '志愿管理',
          children: {
            activity: {
              label: '志愿活动',
              router: '/voluntary-activity',
            },
            feedback: {
              label: '志愿反馈',
              router: '/voluntary-feedback',
            },
          },
        },
        help: {
          icon: 'el-icon-help',
          label: '求助管理',
          router: '/helpManagement',
        },
        auth: {
          icon: 'el-icon-s-check',
          label: '权限管理',
          router: '/auth',
        },
      },
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath)
    },
    eventHeight() {
      let that = this
      window.fullHeight = document.documentElement.clientHeight
      that.windowHeight = window.fullHeight // 高
    },
  },
  mounted() {
    // <!--把window.onresize事件挂在到mounted函数上-->
    window.addEventListener('resize', this.eventHeight)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.eventHeight)
  },
}
</script>

<style lang="less" scoped>
#page-admin-index {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  width: 130%;
  background-color: white;
  .left-nav {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .admin-body {
    width: 100%;
    background-color: white;
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 12.5rem;
  min-height: 25rem;
}
/deep/.el-menu-item-group__title {
  display: none;
}
</style>
